<template>
  <div class="mobile-product-list">
    <!-- 固定顶部导航栏 -->
    <div class="fixed-header">
      <div class="nav-bar">
        <i class="el-icon-arrow-left" @click="$router.back()"></i>
        <span class="title">商品列表</span>
        <div class="right-actions">
          <i class="el-icon-search" @click="toggleSearch"></i>
          <i class="el-icon-s-operation" @click="showFilter"></i>
        </div>
      </div>
      
      <!-- 可折叠搜索框 -->
      <div class="collapsible-search" v-show="showSearchBar">
        <el-input
          placeholder="搜索商品名称、ASIN或SKU"
          v-model="searchQuery"
          clearable
          prefix-icon="el-icon-search"
          @clear="fetchProducts"
          @keyup.enter.native="handleSearch"
        >
        </el-input>
      </div>
    </div>

    <!-- 横向滚动标签页 -->
    <div class="scroll-tabs">
      <div 
        v-for="tab in tabs" 
        :key="tab.name"
        :class="['tab-item', { active: activeTab === tab.name }]"
        @click="handleTabChange(tab.name)"
      >
        <span>{{ tab.label }}</span>
        <span class="badge" v-if="tab.count">{{ tab.count }}</span>
      </div>
    </div>

    <!-- 商品列表区域 -->
    <div class="product-list" v-loading="loading">
      <div v-for="product in products" :key="product.id" class="product-card" @click="viewProductDetail(product)">
        <el-image :src="product.image" fit="contain" class="product-image"></el-image>
        <div class="product-info">
          <div class="product-name">{{ product.name }}</div>
          <div class="product-price">{{ product.currency }} {{ product.price }}</div>
          <div class="stock-tags">
            <el-tag size="mini" :type="getStockStatusType(product.stockStatus)">
              {{ getStockStatusText(product.stockStatus) }}
            </el-tag>
            <span class="stock-number">库存: {{ product.localStock }}</span>
          </div>
        </div>
      </div>
      
      <div class="no-data" v-if="products.length === 0 && !loading">
        <i class="el-icon-goods"></i>
        <p>暂无商品数据</p>
      </div>
      
      <el-pagination
        v-if="total > 0"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
        background
        class="pagination"
      >
      </el-pagination>
    </div>

    <!-- 悬浮扫码按钮 -->
    <div class="floating-scan-button">
      <el-button 
        type="primary" 
        circle 
        icon="el-icon-camera"
        @click="showScanner"
      ></el-button>
    </div>

    <!-- 筛选抽屉 -->
    <el-drawer
      title="筛选条件"
      :visible.sync="filterDrawerVisible"
      direction="rtl"
      size="80%"
    >
      <!-- 筛选内容 -->
      <div class="filter-content">
        <div class="filter-section">
          <h3>排序方式</h3>
          <el-radio-group v-model="sortBy" @change="handleSort">
            <el-radio label="price">价格</el-radio>
            <el-radio label="stock">库存</el-radio>
            <el-radio label="date">上架时间</el-radio>
          </el-radio-group>
        </div>
        <!-- 更多筛选选项 -->
      </div>
    </el-drawer>

    <!-- 扫码组件 -->
    <barcode-scanner ref="scanner" @barcode-detected="handleBarcode" />
  </div>
</template>

<script>
import BarcodeScanner from '@/components/BarcodeScanner.vue'

export default {
  name: 'MobileProductList',
  components: {
    BarcodeScanner
  },
  data() {
    return {
      searchQuery: '',
      activeTab: 'all',
      loading: false,
      products: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      showSearchBar: false,
      filterDrawerVisible: false,
      sortBy: 'date',
      tabs: [
        { name: 'all', label: '全部', count: 0 },
        { name: 'sufficient', label: '充足', count: 0 },
        { name: 'warning', label: '警告', count: 0 },
        { name: 'critical', label: '紧急', count: 0 }
      ]
    }
  },
  created() {
    this.fetchProducts();
  },
  methods: {
    fetchProducts() {
      this.loading = true;
      // 模拟API请求
      setTimeout(() => {
        this.products = [
          {
            id: 1,
            name: '多功能厨房刀具套装 - 专业级不锈钢刀具 5件套',
            asin: 'B07X1KRPVS',
            sku: 'KS-5PC-PRO',
            image: 'https://m.media-amazon.com/images/I/71v0BQM2TYL._AC_SL1500_.jpg',
            currency: '$',
            price: 49.99,
            amazonStock: 32,
            localStock: 15,
            stockStatus: 'sufficient'
          },
          {
            id: 2,
            name: '不锈钢保温杯 - 双层真空隔热 500ml',
            asin: 'B08CZVSGWK',
            sku: 'TM-SS-500',
            image: 'https://m.media-amazon.com/images/I/61eDXs37OQL._AC_SL1500_.jpg',
            currency: '$',
            price: 19.99,
            amazonStock: 45,
            localStock: 8,
            stockStatus: 'warning'
          },
          {
            id: 3,
            name: '智能手环 - 健康监测防水运动手表',
            asin: 'B09DPLK7HZ',
            sku: 'SB-FIT-X1',
            image: 'https://m.media-amazon.com/images/I/61TzjMeU3mS._AC_SL1500_.jpg',
            currency: '$',
            price: 29.99,
            amazonStock: 18,
            localStock: 3,
            stockStatus: 'critical'
          },
          {
            id: 4,
            name: '便携式蓝牙音箱 - 防水户外无线扬声器',
            asin: 'B08LMTK3ZQ',
            sku: 'SP-BT-WP',
            image: 'https://via.placeholder.com/150',
            currency: '$',
            price: 39.99,
            amazonStock: 27,
            localStock: 12,
            stockStatus: 'sufficient'
          },
          {
            id: 5,
            name: '多功能笔记本电脑支架 - 可调节高度',
            asin: 'B07VNDFLY7',
            sku: 'LS-ADJ-01',
            image: 'https://via.placeholder.com/150',
            currency: '$',
            price: 24.99,
            amazonStock: 38,
            localStock: 6,
            stockStatus: 'warning'
          }
        ];
        this.total = 28;
        this.loading = false;
      }, 800);
    },
    handleSearch() {
      this.currentPage = 1;
      this.fetchProducts();
    },
    handleTabChange(tabName) {
      this.activeTab = tabName;
      this.fetchProducts();
    },
    handleCurrentChange(val) {
      this.fetchProducts();
    },
    viewProductDetail(product) {
      this.$router.push(`/mobile/products/${product.id}`);
    },
    getStockStatusType(status) {
      const types = {
        sufficient: 'success',
        warning: 'warning',
        critical: 'danger',
        outOfStock: 'info'
      };
      return types[status] || 'info';
    },
    getStockStatusText(status) {
      const texts = {
        sufficient: '充足',
        warning: '警告',
        critical: '紧急',
        outOfStock: '缺货'
      };
      return texts[status] || '未知';
    },
    getStockClass(status) {
      const classes = {
        sufficient: 'stock-sufficient',
        warning: 'stock-warning',
        critical: 'stock-critical',
        outOfStock: 'stock-out'
      };
      return classes[status] || '';
    },
    toggleSearch() {
      this.showSearchBar = !this.showSearchBar;
    },
    showFilter() {
      this.filterDrawerVisible = true;
    },
    handleSort(value) {
      // 处理排序逻辑
      this.fetchProducts();
    },
    showScanner() {
      this.$refs.scanner.show();
    },
    handleBarcode(code) {
      // 处理扫码结果
      // ... 同上
    }
  }
}
</script>

<style scoped>
.mobile-product-list {
  padding-top: 100px; /* 为固定头部留出空间 */
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.nav-bar .title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}

.nav-bar i {
  font-size: 20px;
  padding: 10px;
}

.right-actions {
  display: flex;
  gap: 15px;
}

.collapsible-search {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

.scroll-tabs {
  display: flex;
  overflow-x: auto;
  background: #fff;
  padding: 10px 0;
  margin-bottom: 10px;
}

.tab-item {
  flex-shrink: 0;
  padding: 8px 16px;
  margin: 0 5px;
  border-radius: 16px;
  font-size: 14px;
  position: relative;
  background: #f5f7fa;
}

.tab-item.active {
  background: #409EFF;
  color: #fff;
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #f56c6c;
  color: #fff;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 12px;
}

.product-card {
  margin-bottom: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.product-image {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  margin-right: 10px;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  color: #f56c6c;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.stock-tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stock-number {
  font-size: 12px;
  color: #606266;
}

.filter-content {
  padding: 20px;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-section h3 {
  margin-bottom: 10px;
  font-size: 16px;
  color: #303133;
}

.no-data {
  text-align: center;
  padding: 30px 0;
  color: #909399;
}

.no-data i {
  font-size: 48px;
  margin-bottom: 10px;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

/* 移除不需要的样式 */
.card-actions {
  display: none;
}

/* 添加悬浮扫码按钮样式 */
.floating-scan-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
}

.floating-scan-button .el-button {
  width: 50px;
  height: 50px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 优化商品卡片的点击效果 */
.product-card {
  transition: background-color 0.2s;
}

.product-card:active {
  background-color: #f5f7fa;
}
</style> 